<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车</title>
<meta name="keywords" content="KEYWORDS..." />
<meta name="description" content="DESCRIPTION..." />
<meta name="author" content="DeathGhost" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="icon" href="${ctxPath}/static/wap1/images/icon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="${ctxPath}/static/wap1/images/icon/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="${ctxPath}/static/wap1/images/icon/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="196x196" href="${ctxPath}/static/wap1/images/icon/apple-touch-icon-196x196-precomposed.png">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="${ctxPath}/static/wap1/css/style.css" />
<script src="${ctxPath}/static/wap1/js/jquery.js"></script>
<script type="text/javascript" src="${ctxPath!}/static/layer/layer.min.js"></script>
<script>
	$(document)
			.ready(
					function() {
						//show or hide:delBtn
						$(".edit").toggle(
								function() {
									$(this).parent().siblings("dd").find(
											".delBtn").fadeIn();
									$(this).html("完成");
									$(".numberWidget").show();
									$(".priceArea").hide();
								},
								function() {
									$(this).parent().siblings("dd").find(
											".delBtn").fadeOut();
									$(this).html("编辑");
									$(".numberWidget").hide();
									$(".priceArea").show();
								});
						//minus
						$(".minus").click(function() {
							var currNum = $(this).siblings(".number");
							if (currNum.val() <= 1) {
								$(this).parents("dd").remove();
								nullTips();
							} else {
								currNum.val(parseInt(currNum.val()) - 1);
							}
						});
						//plus
						$(".plus").click(function() {
							var currNum = $(this).siblings(".number");
							currNum.val(parseInt(currNum.val()) + 1);
						});
						//delBtn
						$(".delBtn").click(function() {
							$(this).parent().remove();
							nullTips();
						});
						//isNull->tips
						function nullTips() {
							if ($(".cart dd").length == 0) {
								var tipsCont = "<mark style='display:block;background:none;text-align:center;color:grey;'>购物车为空！</mark>"
								$(".cart").remove();
								$("body").append(tipsCont);
							}
						}
					});
</script>
</head>
<body>
	<!--header-->
	<header>
		<a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
		<h1>购物车</h1>
	</header>
	<div style="height: 1rem;"></div>
	<dl class="cart">
		<dt>
			<label><input type="checkbox" />全选</label> <a class="edit">编辑</a>
		</dt>
		<input type="hidden" name="cartIds" value="${cart.id!}"/>
		<input type="hidden" value="1" id="addressid" name="addressid"/>
		@for(cart in cartList!){
		<dd>
		
<input type="hidden" value="1" id="paymentid" name="paymentid"/>
			<input type="checkbox" /> <a href="${ctxPath!}/front/goods/goodsDetail/${cart.id!}" class="goodsPic"><img
				src="${ctxPath!}/static/upload/project/${cart.img}" /></a>
				
			<div class="goodsInfor">
				<h2>
					<a href="${ctxPath!}/front/goods/goodsDetail/${cart.id!}">${cart.goodsname!}</a> <span>1</span>
				</h2>
				<div class="priceArea">
					<strong id="price">${cart.price!}</strong>
					<del>${cart.price!}</del>
				</div>
				<div class="numberWidget">
					<input type="button" value="-" onclick="changeV2()" class="minus" /> <input type="text"
						value="${cart.count!}" disabled class="number" /> <input type="button"
						value="+" class="plus" onclick="changeV()" />
				</div>
			</div>
			<a class="delBtn" onclick="deleteC('${cart.id!}')">删除</a>
		</dd>
		@}
		
	</dl>
	<!--bottom nav-->
	<div style="height: 1rem;"></div>
	<aside class="btmNav">
		<a id="priceV"></a> <a onclick="addCart(2)"
			style="background: #64ab5b; color: white; text-shadow: none;">立即下单</a>
	</aside>
	<script type="text/javascript">
		changeV1();
		function changeV1(){
			var count=parseInt($("#count").val());
			var price=$("#price").html();
			$("#priceV").html('合计：'+count*price);
		}
		function changeV(){
			var count=parseInt($("#count").val())+1;
			var price=$("#price").html();
			$("#priceV").html('合计：'+count*price);
		}
		function changeV2(){
			var count=parseInt($("#count").val())-1;
			var price=$("#price").html();
			$("#priceV").html('合计：'+count*price);
		}
		function deleteC(id){
			$.ajax({
				type: "post",
		 		url: '${ctxPath}/wap1/person/deleteCart',
				data: {id:id},
				dataType: "json",
				success:function(data) {
					if(data.success){
							layer.msg("删除购车成功!",2,8);
							  window.location.reload();
					}else{
						layer.msg("删除购物车失败!",2,8);
					}
				}
			});
		}
function addCart(type){
	var goodsid=$("#goodsid").val();
	$.ajax({
		type: "post",
 		url: '${ctxPath}/wap1/person/addCart',
		data: {goodsid:goodsid},
		dataType: "json",
		success:function(data) {
			if(data.success){
				if(type==1){
					layer.msg("加入购车成功!",2,8);
				}else{
					var goodsid1=$("#goodsid").val();
					window.location.href = "${ctxPath!}/wap1/person/LikBuy/"+goodsid1;
				}
				
				
			}else{
				layer.msg("加入购物车失败!",2,8);
			}
		}
	});
}

</script>
</body>
</html>
